Introducing Bootstrap 4: Create Powerful Web Applications Using Bootstrap 4.5
By Jörg Krause
()
About this ebook
Get introduced to front-end CSS frameworks using the latest version of Bootstrap. Through easy-to-follow instructions and examples, this book will prepare you to create powerful web applications using Bootstrap 4.5.
This updated second edition of Introducing Bootstrap 4 builds your understanding of the basic rules of CSS, the SASS pre-compiler, Bootstrap, and how they work together. After learning to set up CSS on both Linux (Ubuntu) and Windows, you will discover how you can make use of templates and themes written for Bootstrap, and how to refine the user interface. You will also find out how you can utilize and activate components. Numerous screenshots and code snippets are provided to help explain and reinforce the concepts discussed in the book.
CSS frameworks give front-end developers the capability to create responsible and adaptive web designs that are able to accommodate the various variations of modern browsers. Start front-end development using Bootstrap 4.5 with this book.
What You Will Learn
- Explore the Bootstrap features required to create web applications
- Understand the basics of responsive web design using CSS 3
- Install the SASS framework and understand how to use it
- Master practical aspects of using Bootstrap in real-life scenarios
Who This Book Is For This book is intended for beginner-level web designers and developers interested in front-end development.
Related to Introducing Bootstrap 4
Related ebooks
Beginning JavaScript: The Ultimate Guide to Modern JavaScript Development Rating: 0 out of 5 stars0 ratingsBuilding Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js Rating: 0 out of 5 stars0 ratingsGetting Started with Visual Studio 2019: Learning and Implementing New Features Rating: 0 out of 5 stars0 ratingsProgramming Windows Workflow Foundation: Practical WF Techniques and Examples using XAML and C# Rating: 0 out of 5 stars0 ratingsOptimizing Visual Studio Code for Python Development: Developing More Efficient and Effective Programs in Python Rating: 0 out of 5 stars0 ratingsVisual Studio Code Distilled: Evolved Code Editing for Windows, macOS, and Linux Rating: 3 out of 5 stars3/5CSS Mastery: Styling Web Pages Like a Pro Rating: 0 out of 5 stars0 ratingsArchitecting CSS: The Programmer’s Guide to Effective Style Sheets Rating: 0 out of 5 stars0 ratingsBeginning PBR Texturing: Learn Physically Based Rendering with Allegorithmic’s Substance Painter Rating: 0 out of 5 stars0 ratingsEveryday Data Structures Rating: 0 out of 5 stars0 ratingsSQL Primer: An Accelerated Introduction to SQL Basics Rating: 0 out of 5 stars0 ratingsBackbone.js Patterns and Best Practices Rating: 0 out of 5 stars0 ratingsA Class ePub Rating: 0 out of 5 stars0 ratingsBecoming Comfortable with Unity Rating: 0 out of 5 stars0 ratingsAn Introduction to Statistics with Python: With Applications in the Life Sciences Rating: 0 out of 5 stars0 ratingsPHP Package Mastery: 100 Essential Tools in One Hour - 2024 Edition Rating: 0 out of 5 stars0 ratingsPractical C++20 Financial Programming: Problem Solving for Quantitative Finance, Financial Engineering, Business, and Economics Rating: 0 out of 5 stars0 ratingsTheoretical Studies in Computer Science Rating: 0 out of 5 stars0 ratingsD Cookbook Rating: 0 out of 5 stars0 ratingsJava Design Patterns for Automation and Performance Rating: 4 out of 5 stars4/5Learn ASP.NET MVC Rating: 4 out of 5 stars4/5iOS in Practice Rating: 0 out of 5 stars0 ratingsHaskell from Another Site Rating: 0 out of 5 stars0 ratingsWPF in Action with Visual Studio 2008: Covers Visual Studio 2008 Service Pack 1 and .NET 3.5 Service Pack 1! Rating: 0 out of 5 stars0 ratingsModern CSS: Master the Key Concepts of CSS for Modern Web Development Rating: 0 out of 5 stars0 ratingsPro C# 9 with .NET 5: Foundational Principles and Practices in Programming Rating: 0 out of 5 stars0 ratingsMastering VMware vSphere 6 Rating: 5 out of 5 stars5/5PHP Programming Solutions Rating: 0 out of 5 stars0 ratingsRuby in Practice Rating: 0 out of 5 stars0 ratingsCSS Master Rating: 0 out of 5 stars0 ratings
Internet & Web For You
Coding For Dummies Rating: 5 out of 5 stars5/5No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5Get Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsHow to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsHacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5The Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5Podcasting For Dummies Rating: 4 out of 5 stars4/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5The Designer's Web Handbook: What You Need to Know to Create for the Web Rating: 0 out of 5 stars0 ratingsStop Asking Questions: How to Lead High-Impact Interviews and Learn Anything from Anyone Rating: 5 out of 5 stars5/5200+ Ways to Protect Your Privacy: Simple Ways to Prevent Hacks and Protect Your Privacy--On and Offline Rating: 0 out of 5 stars0 ratingsThe Cyber Attack Survival Manual: Tools for Surviving Everything from Identity Theft to the Digital Apocalypse Rating: 0 out of 5 stars0 ratingsThe Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsThe Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5Mike Meyers' CompTIA Security+ Certification Guide, Third Edition (Exam SY0-601) Rating: 5 out of 5 stars5/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5The Internet Is Not What You Think It Is: A History, a Philosophy, a Warning Rating: 4 out of 5 stars4/5Cybersecurity For Dummies Rating: 4 out of 5 stars4/5
Reviews for Introducing Bootstrap 4
0 ratings0 reviews
Book preview
Introducing Bootstrap 4 - Jörg Krause
© Jörg Krause 2020
J. KrauseIntroducing Bootstrap 4https://doi.org/10.1007/978-1-4842-6203-0_1
1. Introduction to Bootstrap
Jörg Krause¹
(1)
Berlin, Germany
Bootstrap 4.5 is the latest version of the Bootstrap framework, formerly known as Twitter Bootstrap. It was built by Twitter for the mobile-first apps. It’s a complete and easy-to-use system of styles that helps deal with the daily tasks of a web developer. Compared with other CSS frameworks, the biggest advantage of Bootstrap is the huge selection of additional templates, themes, and boilerplate code. It makes it very easy and fast to create a sophisticated web site without a design agency or without having any professional design skills. There are also endless additions and extensions available to fill the rare gaps. Moreover, Bootstrap can handle desktop web sites and mobile device pages equally as well, so it’s really a one-stop solution.
Table 1-1
Current Browser Support
Where to Obtain Bootstrap
Generally, Bootstrap 4 is distributed using the official web site, https://getbootstrap.com and npm (node package manager). Moreover, you also can create your own distribution using the source code. Bootstrap utilizes the raw files of the cascading style sheets language Sass, a pre-compiler that translates into CSS (unlike the previous version, Bootstrap 3, where the primary language was LESS). All common packaging and building tools such as WebPack, SystemJS, or Browserify can be used without restrictions to add Bootstrap directly or from the sources to existing projects.
Content Delivery Network
Bootstrap is also available via Bootstrap’s own content delivery network (CDN). A CDN enables a web site to frequently retrieve used public files from globally distributed servers. For example, when a user from the United States invokes your host in Germany, the CDN will ensure that the Bootstrap files are retrieved from a server in the United States. This relieves your server, the lines of the provider, and the Internet in general, resulting in a faster download for the user. Basically, this is a win–win situation. If you program on the intranet, a CDN is not to your advantage. If you expect only local users in Germany, there is no advantage to a CDN.
The Bootstrap files are included when using the CDN as follows:
1 stylesheet
2 href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
3 integrity=sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk
4 crossorigin=anonymous
>
5
6 src=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js
7 integrity=sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI
8 crossorigin=anonymous
>
9
10
11
12
13
14
15 integrity=sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj
16 crossorigin=anonymous
>
17
18
19 integrity=sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo
20 crossorigin=anonymous
>
21
The JavaScript libraries are jQuery for Browser abstraction and DOM access, Popper for notifications, and Bootstrap.js for all the interactive Bootstrap components. If you don’t use the components you can remove all three links. If you don’t use notification, simply remove Popper. The CSS parts are entirely autonomous and don’t need any JavaScript.
Bootstrap 4.5.x
This book was reviewed with version 4.5.0. If you use a newer version, you will need to replace all the version numbers of the type 4.5.0 accordingly.
Repository for Local Installation
To obtain a local copy, you would usually use the node package manager, npm.¹ Npm is both the repository for NodeJs and the tool to access the same. If you develop in Ruby on Rails, you should look for the gem Bootstrap for Sass.
² Other environments may come with their own package repositories, but because Bootstrap is entirely for frontend development, a package manager from the JavaScript world is the best bet. Here, npm is the most important one. However, the code world is changing constantly and other providers arise all the time, so keep an eye out for new sites for download or public repositories.
Installation Using Npm
Bootstrap can be installed as follows using the npm command line tool:
1 $ npm install bootstrap@latest
The files are now in the folder node_modules of your local project. This gets referenced by whatever development tool you use. Either you add the paths to index.html or another start file manually, or let a packer do this. (Packers are beyond the scope of this book, so you need to do your own research.) The example files provided in the Github repository for this book don’t use any such dependencies, and use the manual integration instead. This simplifies the setup for beginners.
Bootstrap’s file structure in node_modules/bootstrap contains three major parts:
scss: Path to Bootstrap’s Sass source files
js: Path to Bootstrap’s JavaScript source files
dist: Path to Bootstrap’s minimized CSS and JS that has been precompiled
Bootstrap was developed in version 4 with Sass.³ Sass is available on all platforms. Bootstrap uses Autoprefixer to work with the vendor prefixes in CSS. If you want to compile Bootstrap by using the Sass source and not use the supplied Gruntfile, you must use an Autoprefixer integrated into your own build process. If you use the precompiled Bootstrap files or the Gruntfile, the prefixes are already integrated. The procedure applies to Gulp and other taskRunners equivalent if they are to be used. The appendix reviews this in more depth.
Bootstrap can be downloaded in two types of packages: the compiled version and additionally minimized variants.
Structure of the CSS Files
The complete structure of an environment that uses Bootstrap is as follows:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
| ├── bootstrap.min.css.map
| ├── bootstrap-grid.css
| ├── bootstrap-grid.css.map
| ├── bootstrap-grid.min.css
| ├── bootstrap-grid.min.css.map
| ├── bootstrap-reboot.css
| ├── bootstrap-reboot.css.map
| ├── bootstrap-reboot.min.css
| └── bootstrap-reboot.min.css.map
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
| ├── bootstrap.js.map
| ├── bootstrap.min.js.map
| ├── bootstrap.bundle.js
| ├── bootstrap.bundle.js.map
| ├── bootstrap.bundle.min.js
| └── bootstrap.bundle.min.js.map
Precompiled files are the easiest way to use Bootstrap. The min versions are additionally minimized (compressed). The map files support the developer tools in the browser by mapping the sources to the distributed codes. They are not supposed to be deployed to production environments.
Warning
If you have a Minimizer (sometimes called Minifier or Uglifier) in your project, you pass the nonminimized files (the ones without .min.
infix). Some minimizers destroy the code if it has already been compressed by another minimizer.
In addition to CSS and JavaScript, your app may require fonts that provide the icons. Font symbols are a particularly compact and simple method to incorporate monochrome icons in web sites. Bootstrap 4 does not bundle anything here, and you need to add a font package by yourself. One well- known package is FontAwesome (more on this in Chapter 6, where various icon options are presented). For now, just note that an additional installation step required.
Page-building
Once everything is ready, you can create the first page. This page should provide the basic layout of the entire application. A first version might look like this:
1
2 en>
3
4
5 utf-8>
6 viewport content=width=device-width, initial-scale=1, shrink-to-fit=no
>
7
8
9 stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
integrity=sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk
crossorigin=anonymous
>
10
11
12
13
14
15
Hello, world!
16
17
18
19
20
21
22
23
The first two metatags from line 5 must be at the beginning of the block.
Warning
If you load this page locally via file:///, consider that some parts may not work as expected. Always try to carry out all stages of development with a local web server (IIS express with Visual Studio, IIS, NodeJs, or a local Apache or nginx are perfect for this).
Note that Bootstrap itself must be loaded after jQuery.
Tip
Download only from a CDN when your web site will be public. For an intranet, a local copy is more suitable.
Browser Support
Even with Bootstrap 4, browser support remains an issue. It has been taken a good deal of effort to reach as many browsers and platforms as it does. Currently it looks like this:
Chromium and Chrome for Linux and Firefox for Linux should work, but are not officially supported. The broadest coverage with browsers you currently have is with MacOS and Windows. Internet Explorer is no longer an option in any version, but officially there is support for version 10/11. However, this support will be dropped with Bootstrap 5.
ARIA
Support for barrier-free applications (Accessible Rich Internet Applications Suite = ARIA )⁴ is actually an HTML topic. Some examples in the text are already geared and carry these attributes. Here is an overview of how this works. Bootstrap supports ARIA implicitly and comprehensively.
ARIA
Bootstrap’s code makes use of several of these ARIA tags and attributes. Even if you don’t have any intention of using it, it makes sense to understand something about Bootstrap’s internal settings.
HTML5: The Role-Attribute
The role-attribute is set in the relevant HTML tags. It improves semantic markup and thus helps screen readers and other devices to present the correct output. It’s part of the effort to help advanced screen readers to render properly and make use of distinct local resources. There is a complete description available online.⁵
For example, imagine a device that has a hardware search
button. On your page are two forms. One is for searching your site, one for sending a contact form. With
Here is the list of role-attributes:
banner: The element is a banner
complementary: The element adds a section, usually instead of an
content: Regular content
info: Additional information
form: Form
main: Main area
navigation: Navigation area
search: Search
The following role-attributes describe the structure of the page:
article: Article (text)
columnheader: Column header
definition: Definition
directory: Directory
document: Document
group: Group
heading: Head area
img: Images
list: List
listitem: List item
math: Mathematical formula
note: Note, or supplement
presentation: Presentation, display support
region: Area
row: Row
rowheader: Head of a row (left turn)
separator: Separation line in menus or lists
toolbar: Toolbar
An application example looks like this:
1
separator />
In tags like
1
2
ARIA Is Not an Issue?
In addition to the barrier-free access, ARIA facilitates semantic attributes that take care and help the maintenance of your pages source code. It is always easier to work with role=banner
compared to work interspersed with dozens of
Optimization
Correctly created Bootstrap pages can be considerably larger than classic HTML pages. The stability of the styles has its price. You should therefore carefully consider how elements are created. A typical example are long lists with many options. This is where the additions come into the list of elements, buttons, or menus you want to use. This is especially the case when the code is generated on the server. Here’s an example:
1
- list-group>
2
3
4
5 class=btn btn-default dropdown-toggle
6 data-toggle=dropdown
aria-haspopup=true
7 aria-expanded=false
>
8 Action caret>
9
10
- dropdown-menu>
11
12
13
14
divider>
15
16
17
18
19
20
21
This list requires about 530 characters in UTF-16 that are more than 1 KB (in UTF-8 only the characters outside of ASCII have several characters). When you view 40 items on the page, which is not usually a problem because of the drop-downs, there are 40 KB HTML and a payload of roughly 2 KB (40 times the text for each entry with 50 bytes). Here it is worthwhile to use JavaScript.
The following code defines a template with the code of one element, and the JavaScript then adds it to the running time of each list element. For control, HTML5 attributes are used:
1
- list-group data-list-target>
2
3
4
5
6
7
8 class=btn btn-default dropdown-toggle
9 data-toggle=dropdown
aria-haspopup=true
10 aria-expanded=false
>
11 Action caret>
12
13
- dropdown-menu>
14
15
16
17
divider>
18
19
20
This is then read by JavaScript using data-list-template attributes to address this portion in the code (line 6), and then cloned at the achievable place through data-list-target attributes. The code block uses jQuery here:
1 // Execution if the document was loaded
2 $(function(){
3 // Load Template, clone and hide
4 var template = $('[data-list-template]').hide().clone();
5 // Search list items, Attach copied template, Show
6 $('[data-list-target] li').append($(template).show());
7 });
The script will only cost about 250 bytes (130 characters without the comments). Instead of a maximum of 40 KB, this solution requires less than 2.5 KB: if you want it to look more striking, it’s 6% of the original size or a decrease of 94%. In addition, the JavaScript code can be outsourced and cached in the browser.
Interactive Surfaces
The script can be further refined so that the switching times only appear when the mouse pointer hovers over the entry. The append is only performed when a mouseenter emerges and mouseleave all buttons are removed. Ensure that events always in some $(document).on('click') pattern, so it works well with the dynamically appended elements. Tip: RTFM jQuery!
Why does this matter for Bootstrap? The smart structure of connected classes and the consequent usage of HTML may lead to many more elements and complex trees compared with pages written entirely manually. It clearly has advantages, and it will speed up your development time. But it will definitely come with a price. And if you want to refine your project, such techniques can be helpful. This is only one example of many such ways to improve performance.
What’s New in Bootstrap 4?
This section gives an overview of the changes for those readers switching from Bootstrap 3.
Global Changes
The unit system has been changed from pixels (px) to rem (CSS) or em (Media Queries). The global font, which serves as the starting point, has been increased from 14 pixels to 16 pixels. This is mainly a reference to higher-resolution screens of mobile